
<template>
  <div>
    <p>计数器：{{ count }}</p>
    <button @click="count++">+1</button>
    <p>
      姓名：{{ user.name }} 性别：{{ user.info.gender }} 年龄：{{
        user.info.age
      }}
    </p>
    <button @click="user.info.age++">age++</button>
  </div>
</template>

<script setup>
import { ref, watch, reactive } from "vue";
const count = ref(0);
const user = reactive({
  name: "wc",
  info: {
    gender: "男",
    age: 18,
  },
});

// 监听多个响应式数据
// watch([数据1, 数据2, ...], 改变后回调函数)
watch([count, user], () => {
  console.log("数据变化了~");
});
</script>

<style lang="scss" scoped>
</style>


